<template>
    <div class="photoinfo">
        <myheader title="图片详情"></myheader>
       <div class="photoinfo-wrap">
           <h4>{{photoinfo.title}}</h4>
           <p class="title">
               <span class="tiem">发表时间：{{photoinfo.add_time | dateFormat}}</span>
               <span class="click">点击：{{photoinfo.click}}次</span>
           </p>
           <!--        图片预览组件vuepreview-->
           <vue-preview :slides="slide1" @close="handleClose"></vue-preview>
           <p class="content" v-html="photoinfo.content"></p>

        <comment :artid="id"></comment>
       </div>
    </div>
</template>

<script>
    import myheader from '../../components/Header'
    import comment from '../../components/comment'
    import {Toast} from 'mint-ui'
    export default {
        name: "photoinfo",
        props:['id'],
        components:{
            myheader,
            comment
        },
        data(){
            return {
                photoinfo:{},
                slide1:[],


            }
        },
        methods:{
            getpreviewlist(){//获取id对应的图片缩略图数据
              this.$http.get('api/getthumimages/'+this.id).then(res=>{

                  res.body.message.forEach(item=>{ //使用foreach给每一项加了三个属性
                      item.msrc = item.src;
                      item.w = 600;
                      item.h =400
                  })

                  this.slide1 = res.body.message
              },error=>{
                  Toast('获取图片缩略图失败！')
              })
            },
            handleClose(){

            },
            getPhotoInfo(){//获取图片的详情数据
                this.$http.get('api/getimageInfo/'+this.id).then(res=>{
                    console.log(res);
                    this.photoinfo = res.body.message[0]
                },error=>{
                    Toast('获取图片详情数据失败！')
                })
            }
        },
        created(){
            this.getpreviewlist();
            this. getPhotoInfo()
        }

    }
</script>

<style scoped lang="scss">
    @import "../../assets/style";
.photoinfo-wrap{
    padding: 0 4px 55px;
    h4{
        margin: 15px 0;
        font-size: 15px;
        text-align: center;
        color: $primary-text-color;
    }
    .title{
        display: flex;
        justify-content: space-between;
    }
    .content{
        text-indent: 24px;
        color: #333333;
        line-height: 25px;
    }
}
</style>
